<template>
  <div class="changepwd">
    <h3>修改密码</h3>
    <div class="changepwd-input">
      <p class="changepwd-oldpwd">
        <span>原密码</span>
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="原密码"
          v-model="oldpassword"
          show-password
          style="width: 200px"
        ></el-input>
        <label class="changepwd-wrong" v-show="showwrong"
          >密码错误,请重新输入</label
        >
      </p>
      <p>
        <span>新密码</span>
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="输入新密码"
          v-model="password"
          show-password
          style="width: 200px"
        ></el-input>
      </p>
      <p class="changepwd-sure">
        <span>确认新密码</span>
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="确认新密码"
          v-model="truepassword"
          show-password
          style="width: 200px"
        ></el-input>
        <label class="changepwd-two" v-show="suretwo">两次输入密码不相同</label>
      </p>
      <p class="changepwd-button">
        <span></span>
        <button class="changepwd-add" @click="clicksure">确定</button>
        <button>重置</button>
      </p>
    </div>
  </div>
</template>

<script>
// 解构引入验证密码,修改老密码
import { checkpwd, changeoldpwd } from "@/apis/user.js";
export default {
  data() {
    return {
      suretwo: false,
      showwrong: false,
      oldpassword: "",
      password: "",
      truepassword: "",
      // 假设当前id为空
      sureid: 0,
    };
  },
  methods: {
    clicksure() {
      // 将当前id赋给动态属性
      this.sureid = localStorage.getItem("info");
      // console.log(this.sureid);
      checkpwd({
        oldPwd: this.oldpassword,
        id: this.sureid,
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          this.showwrong = false;
          // console.log("成功了");
          if (this.password == this.truepassword && this.password != "") {
            changeoldpwd({
              newPwd: this.password,
              id: this.sureid,
            }).then(() => {
              // console.log(res);
              this.suretwo = false;
              this.$message({
                message: "用户密码修改成功,请重新登录",
                type: "success",
              });
              // 清空密码框
              this.oldpassword = "";
              this.password = "";
              this.truepassword = "";
              // 跳转到登录界面
              this.$router.push("/");
            });
          } else {
            this.suretwo = true;
          }
        } else {
          this.showwrong = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.changepwd {
  margin: 20px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  h3 {
    line-height: 60px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .changepwd-input {
    width: 300px;
    display: flex;
    flex-direction: column;
    .changepwd-oldpwd {
      position: relative;
      .changepwd-wrong {
        position: absolute;
        width: 200px;
        bottom: 10px;
        left: 310px;
        color: red;
      }
    }
    .changepwd-sure {
      position: relative;
      .changepwd-two {
        position: absolute;
        width: 200px;
        bottom: 10px;
        left: 310px;
        color: red;
      }
    }
    p {
      margin-bottom: 20px;
      span {
        width: 80px;
        display: inline-block;
        margin-right: 20px;
        text-align: right;
      }
    }
    .changepwd-button {
      width: 300px;
      button {
        width: 60px;
        border: 0;
        border-radius: 5px;
        margin-right: 10px;
        line-height: 40px;
      }
      button:last-child {
        background-color: #fff;
        border: 1px solid #ccc;
      }
      .changepwd-add {
        background-color: #409eff;
        color: #fff;
      }
    }
  }
}
</style>